<template>
  <div class="container">
     <Tab  style="position:fixed; background-color:#fff; z-index:999"/>
      <van-loading type="spinner" color="#1989fa" v-if="this.data4.length == 0" style="position:absolute;top:50%;left:50%"/>
   
    
    <div style="height:55px"></div>
    <van-cell title="申请人" :value="approver_name"/>
    <van-cell title="申请时间" :value="apply_time"/>
    <!-- 物料列表     -->
    <van-list>
      <div v-for="item in goodlist" :key="item.id">
      <van-swipe-cell>
            <van-card
              :num="item.apply_num"
              :desc="item.product_type"
              :title="item.product_name"
            />
            <span class="type">{{item.wpg_name}}</span>
          </van-swipe-cell>
      </div>
    </van-list>
    <!-- 审核人 -->
    <van-cell title="审核人"/>
    <van-steps direction="vertical">
      <van-step style="height:80px; display:none;">
        <h4>【城市】物流状态1</h4>
        <p>2016-07-12 12:40</p>
      </van-step>
      <div v-for="item in data3" :key="item.id">
        <van-step>
          <h2>{{item.approver_name}}</h2>
           <img :src="item.signpath" alt="" style="width:70px;height:50px;position:absolute;top:40px;left:170px;" v-show="item.flag">
          <p>{{item.order_time}}</p>
          <span style="position:absolute;top:50%;right:30px">{{item.yesorno}}</span>
          <span>{{item.remarks}}</span>
        </van-step>
      </div>
    </van-steps>
    <!-- 备注 -->
    <van-field
      v-model="message"
      rows="2"
      autosize
      label="审批备注"
      type="textarea"
      maxlength="50"
      placeholder="请输入备注"
      show-word-limit
    />

    <!-- 上传图片 -->
  <!-- <van-uploader v-model="fileList" multiple :max-count="1" :after-read="afterRead"/> -->



    <!-- 最大审批人审批 -->
    <div class="footer" v-show="flag1">
      <van-button type="danger" round @click="nopass()">不通过</van-button>
      <van-button type="primary" round @click="pass1()">通过</van-button>
    </div>
    <!-- 中间人 -->
    <div class="footer" v-show="flag3">
      <van-button type="danger" round @click="nopass()">不通过</van-button>
      <van-button type="primary" round @click="containue()">通过</van-button>
    </div>
    <!-- 提交人 -->
    <div class="footer" v-show="flag2">
      <van-button type="primary" round @click="cancel()">取消申请</van-button>
      <van-button type="primary" round v-show="showflag" @click="containue()">继续提交</van-button>
    </div>

    <div class="footer" v-show="flag4">
      <van-button type="primary" round v-show="showflag" @click="confirm()">确认</van-button>
    </div>

    <van-action-sheet v-model="show1" :actions="actions" @select="onSelect1"/>
    <van-action-sheet v-model="show2" :actions="nextapproverList" @select="onSelect2"/>
    <!-- <van-action-sheet v-model="show1" /> -->
  </div>
</template>
<script>
import axios from "axios";
import { getCookie } from "Utils/cookie";
import { Toast} from "vant";
import { setTimeout } from 'timers';
import Tab from 'Comp/Tab'
export default {
  data() {
    return {
      list: [],
      approver_name: "",
      apply_time: "",
      show1: false, //显示驳回的人
      show2: false, //显示提交的人
      message: "", //备注
      goodlist: [],
      data3: [],
      data4: [], //判断审批人的等级，按照等级显示和隐藏同意和不同意按钮
      flag1: false, //最高等级审批人
      flag2: false, //提交人
      flag3: false,
      flag4: false,//最高审批人同意给申请人
      showflag: false, //提交人继续提交
      approver_id: "",
      remarks: "",
      ao_id: "",
      actions: [],
      nextapproverList: [], //下级审批人的
      yesorno: "",
      fileList:[],
    };
  },
  components:{
    Tab,
  },
  methods: {
     afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file.file);
    },
    onSelect1(item) {
      console.log(11111);
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show1 = false;
      axios({
        url: "/hrkc/Approver_Order/addapprover_order",
        method: "POST",
        params: {
          ao_ids: this.ao_id,
          remarkss: this.message,
          yesornos: "no",
          approver_id: item.approver_id,
          approver_name: item.name,
          org_code: getCookie("org_no"),
          apply_id: this.list.apply_id
        }
      }).then(res => {
        console.log("不同意", res);
        Toast("驳回成功");
        this.$router.push("/application");
      });
    },

    onSelect2(item) {
      console.log(11111,item);
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show2 = false;
      
      axios({
        url: "/hrkc/Approver_Order/addapprover_order",
        method: "POST",
        params: {
          ao_ids: this.ao_id,
          remarkss: this.message,
          yesornos: this.yesorno,
          approver_id: item.approver_id,
          approver_name: item.name,
          org_code: getCookie("org_no"),
          apply_id: this.list.apply_id
        }
      }).then(res => {
        console.log("同意", res);

        Toast("提交成功");
        this.$router.push("/application");
      });
    },

    //取消申请
    cancel() {
      axios({
        url: "/hrkc/Product/updateApplybywhether_end",
        method: "POST",
        params: {
          apply_id: this.list.apply_id,
          whether_end: "no"
        }
      }).then(res => {
        console.log(res);
      });
      axios({
        url: "/hrkc/Approver_Order/updateapprover_order",
        method: "POST",
        params: {
          ao_id: this.ao_id,
          remarks: this.message,
          yesorno: "cancel"
        }
      }).then(res => {
        this.$router.push("/history");
      });
    },

    //最大审批人点击通过
    pass1() {
      console.log('最大审批人通过');
     
        axios({
        url: "/hrkc/Product/updateMaxApplybywhether_end",
        method: "POST",
        params: {
          ao_ids: this.ao_id,
          remarkss: this.message,
          yesornos: "yes",
          approver_name: this.list.approver_name,
          org_code: getCookie("org_no"),
          apply_id: this.list.apply_id,
         approver_id:this.list.approver_id, //提交人的人员id

        }
      }).then(res => {
         this.$router.push("/application");
      });
    },
    //最大审批人点击不通过
    nopass() {
      this.show1 = true;
    },
    //继续提交
    containue() {
      console.log(1111111111111111)
      this.show2 = true;
    },
    //最大审批人通过给提交人通过
   confirm(){
     console.log('确认')
      axios({
        url: "/hrkc/Product/updateApplybywhether_end",
        method: "POST",
        params: {
          apply_id: this.list.apply_id,
          whether_end: "yes"
        }
      }).then(res => {
        
      });

      axios({
        url: "/hrkc/Approver_Order/updateapprover_order",
        method: "POST",
        params: {
          ao_id: this.ao_id,
          remarks: this.message,
          yesorno: "yes"
        }
      }).then(res => {
        this.$router.push("/history");
      });

   },
    getApplyinformation() {
      
    },
    //获取当前申请记录的所有信息
    getgetApplyinformation() {
      axios({
        url: "/hrkc/Product/getApplyinformation",
        method: "POST",

        params: {
          org_code: getCookie("org_no"),
          id: this.list.apply_id,
          whether_end: "ing"
        }
      })
        .then(res => {
          console.log('res===>111',res)
          this.approver_id = res.data.data1[0].approver_id;
          this.apply_time = res.data.data1[0].apply_time;
          // this.message = res.data.data1[0].remarks;
          this.approver_name = res.data.data1[0].approver_name;
          this.goodlist = res.data.data2;
          this.ao_id = res.data.data3[res.data.data3.length - 1].id;
          //去掉data3最后一条数据,展示用
          for (var i = 0; i < res.data.data3.length - 1; i++) {
            this.data3.push(res.data.data3[i]);
          }
          if (res.data.data3.length > 1) {

            //最小员工
            if (
              res.data.data3[0].approver_id ==
              getCookie("approver_id")
            ) {
              console.log("最小");
              this.showflag = true;
              this.yesorno = "submit";
              //  this.flag1 = false;
              // this.flag3 = false;
            }
          }
          if (res.data.data3[res.data.data3.length - 1].approver_id ==getCookie("approver_id") ) {
            if (this.approver_id == getCookie("approver_id")) {
              if(res.data.data3[res.data.data3.length - 2].yesorno == '通过'){
                console.log("最大审批人通过，且当前为最小账号登录");
                this.flag2 = false;
                this.flag1 = false;
                this.flag3 = false;
                this.flag4 = true;
              }else{
                console.log("最小并且当前为最小账号登录");
                this.flag2 = true;
                this.flag1 = false;
                this.flag3 = false;
              } 
            }
          }
        })
        .catch(error => Promise.reject(error));
    },
    getnextapproverList(){
      axios({
      url: "/hrkc/Approver/nextapproverList",
      method: "POST",
      params: {
        grade_tree: getCookie("grade_id"),
        org_code: getCookie("org_no")
      }
    }).then(res => {
      console.log("this.data4=", this.data4);
      if (res.data.code == 1) {
        //最大审批人
        if (
          this.data4[this.data4.length - 1].approver_id ==
          getCookie("approver_id")
        ) {
          this.flag1 = true;
          this.flag2 = false;
          this.flag3 = false;
          this.showflag = false;
        }else{
          this.showflag = false;
          this.flag1 = false;
          this.flag2 = false;
          this.flag3 = false;
        }
      } else if (res.data.code == 0) {
        this.yesorno = "yes";
        //中间审批人
        for (let i = 0; i < res.data.data.length; i++) {
          var json = {};
          json.name = res.data.data[i].approver_name;
          json.approver_id = res.data.data[i].id;
          this.nextapproverList.push(json);
        }
        console.log("this.data4111", this.data4);
        if (this.data4[this.data4.length - 1].approver_id ==getCookie("approver_id") ) {
          this.showflag = false;
          this.flag1 = false;
          this.flag2 = false;
          this.flag3 = true;
        }else{
          this.showflag = false;
          this.flag1 = false;
          this.flag2 = false;
          this.flag3 = false;
        }
      } else {
        this.flag1 = false;
        this.flag2 = false;
        this.flag3 = false;
      }
      this.getgetApplyinformation(); //获取当前申请记录的所有信息并判断提交人
     
    });
    }
  },
  mounted() {
    this.list = JSON.parse(this.$route.query.data);
    console.log('approver_id',this.list)
 //单独获取审批列表
    axios({
        url: "/hrkc/Product/getApplyinformation",
        method: "POST",
        params: {
          org_code: getCookie("org_no"),
          id: this.list.apply_id,
          whether_end: "ing"
        }
      }).then(res => {
        console.log('1111111111',res)
          this.data4 = res.data.data3;
          console.log('2222',this.data4)
          this.getnextapproverList()
      });
   
    axios({
      url: "/hrkc/Approver/historyapproverList",
      method: "POST",
      params: {
        grade_id: getCookie("grade_id"),
        org_code: getCookie("org_no"),
        id: this.list.apply_id
      }
    }).then(res => {
      console.log('22222222222222222222',res)
      if (res.data.data != null) {
        for (let i = 0; i < res.data.data.length; i++) {
          var json = {};
          // console.log("111111",res.data.data[i].product_name_value)
          json.name = res.data.data[i].approver_name;
          json.approver_id = res.data.data[i].id;
          this.actions.push(json);
        }
      }

      console.log(this.actions);
    });
  }
};
</script>
<style lang="scss" scoped>
.van-card {
  height: 90px;
}
.van-card__content {
  height: 70px;
}
.van-card__title {
  height: 30px;
  line-height: 30px;
  font-size: 15px;
}
.van-card__desc {
  height: 20px;
  line-height: 20px;
  font-size: 10px;
}
.van-card__num {
  margin-top: -80px;
  font-size: 10px;
}
.van-card__footer {
  margin-top: -60px;
}
.type{
position: absolute;
top:60px;
left:10px
}
.footer {
  position: relative;
  top: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .van-button {
    width: 150px;
  }
}
</style>
